<template>
  <div>
    <h3>新增计划</h3>
    <div class="display">
      <p>计划信息</p>
    </div>
    <el-form
      ref="elForm"
      :model="formData"
      :rules="rules"
      size="medium"
      label-width="100px"
    >
      <el-row type="flex" justify="space-around" align="top" gutter="15">
        <el-col :span="7">
          <el-form-item label="项目编码" prop="projectNumber">
            <el-input
              v-model="formData.projectNumber"
              placeholder="请输入项目编号"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item
            label="培训项目"
            prop="trainingProject"
            label-width="120px"
          >
            <el-input
              v-model="formData.trainingProject"
              placeholder="请输入培训项目"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="计划类别" prop="planType" label-width="140px">
            <el-select
              v-model="formData.planType"
              placeholder="请选择计划类别"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in planTypeOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="space-around" align="top" gutter="15">
        <el-col :span="7">
    <el-form-item label="培训时间" prop="trainingTime">
      <el-select
        v-model="formData.trainingTime"
        placeholder="请选择培训时间"
        clearable
        multiple
        :style="{ width: '100%' }"
      >
        <!-- 全选选项 -->
        <el-option
          label="全选"
          value="全选"
          @click.native="handleSelectAll"
        ></el-option>
        <!-- 季度选项 -->
        <el-option
          v-for="(item, index) in trainingTimeOptions"
          :key="index"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </el-form-item>
  </el-col>

        <el-col :span="7">
          <el-form-item
            label="组织部门/科室"
            prop="organizingDepartment"
            label-width="120px"
          >
            <!-- 使用 el-popover 实现树形选择 -->
            <el-popover
              placement="bottom-start"
              width="300"
              trigger="click"
              v-model="treeVisible"
            >
              <!-- 树形选择内容 -->
              <el-tree
                :data="organizingDepartmentOptions"
                :props="defaultProps"
                node-key="value"
                :default-expand-all="true"
                @node-click="handleNodeClick"
                :highlight-current="true"
              ></el-tree>
              <!-- 输入框 -->
              <el-input
                slot="reference"
                v-model="formData.organizingDepartmentLabel"
                placeholder="请选择组织部门"
                readonly
                :style="{ width: '100%' }"
              ></el-input>
            </el-popover>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item
            label="实施部门/科室"
            prop="implementingDepartment"
            label-width="140px"
          >
            <el-select
              v-model="formData.implementingDepartment"
              placeholder="请选择实施部门"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in implementingDepartmentOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex" justify="space-around" align="top" gutter="15">
        <el-col :span="7">
          <el-form-item label="培训对象" prop="trainingTarget">
            <el-input
              v-model="formData.trainingTarget"
              placeholder="请输入培训对象"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item
            label="计划参训人数"
            prop="plannedParticipants"
            label-width="120px"
          >
            <el-input
              v-model="formData.plannedParticipants"
              placeholder="请输入计划参训人数"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="7">
          <el-form-item
            label="培训地点"
            prop="trainingLocation"
            label-width="140px"
          >
            <el-input
              v-model="formData.trainingLocation"
              placeholder="请输入培训地点"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <div class="display">
        <p>培训信息</p>
      </div>
      <el-row type="flex" justify="space-around" align="top" gutter="15">
        <el-col :span="7">
          <el-form-item label="培训方式" prop="trainingMethod">
            <el-select
              v-model="formData.trainingMethod"
              placeholder="请选择培训方式"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in trainingMethodOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item
            label="培训分类"
            prop="trainingClassification"
            label-width="120px"
          >
            <el-select
              v-model="formData.trainingClassification"
              placeholder="请选择培训分类"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in trainingClassificationOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item
            label="培训课时（小时）"
            prop="trainingHours"
            label-width="140px"
          >
            <el-input
              v-model="formData.trainingHours"
              placeholder="请输入培训课时(小时)"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="space-around" align="top" gutter="15">
        <el-col :span="7">
          <el-form-item label="培训师资" prop="training师资">
            <el-select
              v-model="formData.training师资"
              placeholder="请选择培训师资"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in training师资Options"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item
            label="培训方向"
            prop="trainingDirection"
            label-width="120px"
          >
            <el-select
              v-model="formData.trainingDirection"
              placeholder="请选择培训方向"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in trainingDirectionOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item
            label="培训类别"
            prop="trainingCategory"
            label-width="140px"
          >
            <el-select
              v-model="formData.trainingCategory"
              placeholder="请选择培训类别"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in trainingCategoryOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="start" align="top" gutter="15">
        <!-- 修改 el-form-item 的样式，添加宽度为 100% -->
        <el-form-item label="备注" prop="remarks" :style="{ width: '100%' }">
          <el-input
            v-model="formData.remarks"
            type="textarea"
            placeholder="请输入备注"
            :autosize="{ minRows: 4, maxRows: 4 }"
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
      </el-row>

      <div class="display">
        <p>预算信息</p>
      </div>
      <el-row type="flex" justify="space-around" align="top" gutter="15">
        <el-col :span="7">
          <el-form-item
            label="差旅费（元）"
            prop="travelExpenses"
            label-width="120px"
          >
            <el-input
              v-model="formData.travelExpenses"
              placeholder="请输入培训费（元）"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item
            label="培训费（元）"
            prop="trainingFees"
            label-width="120px"
          >
            <el-input
              v-model="formData.trainingFees"
              placeholder="请输入培训费（元）"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item
            label="总预算（元）"
            prop="totalBudget"
            label-width="140px"
          >
            <!-- <el-select v-model="formData.field103" placeholder="请输入总预算" clearable :style="{width: '100%'}">
              <el-option v-for="(item, index) in field103Options" :key="index" :label="item.label"
                :value="item.value" :disabled="item.disabled"></el-option>
            </el-select> -->
            <el-input
              v-model="formData.totalBudget"
              placeholder="请输入总预算"
              clearable
              :style="{ width: '100%' }"
              disabled="flase"
            >
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <div class="display">
        <p>培训材料</p>
      </div>
      <el-form-item label="上传培训文件" prop="trainingMaterials" id="tranfer">
        <el-button type="primary" icon="el-icon-search" size="medium">
          主要按钮
        </el-button>
      </el-form-item>
      <el-form-item size="large">
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import {
  listEducate,
  getEducate,
  delEducate,
  addEducate,
  updateEducate,
} from "@/api/system/educate";
export default {
  components: {},
  props: [],
  data() {
    return {
      formData: {
        projectNumber: null,
        trainingProject: null,
        // trainingTime: undefined,
        trainingTarget: null,
        plannedParticipants: null,
        fieldtrainingLocation: null,
        trainingHours: null,
        remarks: null,
        travelExpenses: null,
        totalBudget: null,
        trainingMaterials: null,
        organizingDepartment: "", // 存储选中的 value
        organizingDepartmentLabel: "", // 存储选中的 label
         trainingTime: [], // 存储选中的培训时间
      },
      treeVisible: false, // 控制树形选择弹窗的显示
      rules: {
        projectNumber: [
          {
            required: true,
            message: "请输入项目编号",
            trigger: "blur",
          },
        ],
        trainingProject: [
          {
            required: true,
            message: "请输入培训项目",
            trigger: "blur",
          },
        ],
        planType: [
          {
            required: true,
            message: "请选择计划类别",
            trigger: "change",
          },
        ],
        trainingTime: [
          {
            required: true,
            message: "请选择培训时间",
            trigger: "change",
          },
        ],
        organizingDepartment: [
          {
            required: true,
            message: "请选择组织部门",
            trigger: "change",
          },
        ],
        implementingDepartment: [
          {
            required: true,
            message: "请选择实施部门",
            trigger: "change",
          },
        ],
        trainingTarget: [
          {
            required: true,
            message: "请输入培训对象",
            trigger: "blur",
          },
        ],
        trainingMethod: [
          {
            required: true,
            message: "请选择培训方式",
            trigger: "change",
          },
        ],
        trainingClassification: [
          {
            required: true,
            message: "请选择培训分类",
            trigger: "change",
          },
        ],
        trainingHours: [
          {
            required: true,
            message: "请输入培训课时（小时）",
            trigger: "blur",
          },
        ],
        training师资: [
          {
            required: true,
            message: "请选择培训师资",
            trigger: "change",
          },
        ],
        trainingDirection: [
          {
            required: true,
            message: "请选择培训方向",
            trigger: "change",
          },
        ],
        trainingCategory: [
          {
            required: true,
            message: "请选择培训类别",
            trigger: "change",
          },
        ],
        remarks: [
          {
            required: true,
            message: "请输入备注",
            trigger: "blur",
          },
        ],
        travelExpenses: [
          {
            required: true,
            message: "请输入差旅费",
            trigger: "blur",
          },
        ],
        trainingFees: [
          {
            required: true,
            message: "请输入培训费（元）",
            trigger: "blur",
          },
        ],
     
      },
      planTypeOptions: [
        {
          label: "年度计划",
          value: "年度计划",
        },
        {
          label: "月度计划",
          value: "月度计划",
        },
        {
          label: "季度计划",
          value: "季度计划",
        }
      ],
      trainingTimeOptions: [
        {
          label: "第一季度",
          value: "第一季度",
        },
        {
          label: "第二季度",
          value: "第二季度",
        },
        {
          label: "第三季度",
          value: "第三季度",
        },
        {
          label: "第四季度",
          value: "第四季度",
        },
      ],
      organizingDepartmentOptions: [
        {
          label: "双流机场指挥所",
          value: "双流机场指挥所",
          children: [
            { label: "航站楼管理部", value: "航站楼管理部" },
            { label: "研发部门", value: "研发部门" },
            { label: "市场部门", value: "市场部门" },
            { label: "测试部门", value: "测试部门" },
          ],
        },
        {
          label: "选项二",
          value: 2,
          children: [
            { label: "财务部门", value: "财务部门" },
            { label: "运维部门", value: "运维部门" },
          ],
        },
      ],
      implementingDepartmentOptions: [
        {
          label: "研发部",
          value: "研发部",
        },
        {
          label: "市场调研部",
          value: "市场调研部",
        },
      ],
      trainingMethodOptions: [
        {
          label: "内培",
          value: "内培",
        },
        {
          label: "外培",
          value: "外培",
        },
      ],
      trainingClassificationOptions: [
        {
          label: "时应提高",
          value: "时应提高",
        },
        {
          label: "简单培训",
          value: "简单培训",
        },
        {
          label: "强化素质",
          value: "强化素质",
        },
      ],

      training师资Options: [
        {
          label: "内部",
          value: "内部",
        },
        {
          label: "外部",
          value: "外部",
        },
      ],
      trainingDirectionOptions: [
        {
          label: "职业深造",
          value: "职业深造",
        },
        {
          label: "职业发展",
          value: "职业发展",
        },
      ],
      trainingCategoryOptions: [
        {
          label: "紧急救援",
          value: "紧急救援",
        },
        {
          label: "日常培训",
          value: "日常培训",
        },
        {
          label: "专题培训",
          value: "专题培训",
        }
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  computed: {},
  watch: {},
  created() {
    // 获取路由参数中的 id
    // const id = this.$route.params.id;
  },
  mounted() {},
  methods: {
      // 处理全选逻辑
      handleSelectAll() {
      if (this.formData.trainingTime.length === this.trainingTimeOptions.length) {
        // 如果已经全选，则清空
        this.formData.trainingTime = [];
      } else {
        // 否则选中所有季度
        this.formData.trainingTime = this.trainingTimeOptions.map(
          (item) => item.value
        );
      }
    },
    // 处理树节点点击事件
    handleNodeClick(data) {
      this.formData.organizingDepartment = data.value; // 设置选中的 value
      this.formData.organizingDepartmentLabel = data.label; // 设置选中的 label
      this.treeVisible = false; // 关闭弹窗
    },

submitForm() {
  this.$refs["elForm"].validate((valid) => {
    if (!valid) return;

    // 将 trainingTime 数组转换为字符串
    const formDataToSend = {
      ...this.formData,
      trainingTime: this.formData.trainingTime.join(', ') // 将数组转换为逗号分隔的字符串
    };

    // TODO 提交表单
    addEducate(formDataToSend).then((res) => {
      if (res.code === 200) {
        this.$message({
          message: "提交成功",
          type: "success",
          duration: 1500,
        });
        // 提交成功后跳转到 index.vue 页面
        this.$router.push("/educate");
      }
    });
  });
},
    resetForm() {
      this.$refs["elForm"].resetFields();
    },
  },
};
</script>
<style>
.display {
  height: 60px;
  width: 100%;
  background-color: #f3f7fa;
  margin-bottom: 22px;
  margin-left: 19px;
  margin-top: 22px;
  margin-right: 19px;

  display: flex;
  /* justify-content: center;  */
  align-items: center;
}

h3 {
  font-size: 20px;
  margin-left: 75px;
  margin-top: 38px;
  margin-bottom: 38px;
}

p {
  margin-left: 56px;
  /* margin-top: 20px;
  margin-bottom: 20px; */
  font-size: 18px;
}

#tranfer {
  margin-left: 68px;
}
</style>
